<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="100"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="职位名称">
          <Input v-model="formItem.jobName" placeholder="请输入职位名称" style="width:150px"></Input>
        </FormItem>
        <FormItem label="企业名称/ID">
          <Input v-model="formItem.conpanyName" placeholder="请输入企业名称/ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="工作性质">
          <Select v-model="formItem.jobType" style="width:150px">
            <Option value>全部</Option>
            <Option value="1">全职</Option>
            <Option value="2">兼职</Option>
            <Option value="3">实习</Option>
          </Select>
        </FormItem>
        <FormItem label="时间查询类型">
          <Select v-model="formItem.searchType" style="width:120px">
            <Option value="timeCreate">创建时间</Option>
            <Option value="timeUpdate">更新时间</Option>
          </Select>
        </FormItem>
        <FormItem label style="margin-left:-95px">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择开始时间" v-model="formItem.searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择结束时间" v-model="formItem.searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="是否置顶">
          <Select v-model="formItem.isTopList" style="width:150px">
            <Option value>全部</Option>
            <Option value="0">未置顶</Option>
            <Option value="1">已置顶</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <Tabs type="card" class="card" @on-click="changeStatus">
      <TabPane label="招聘中" value="1"></TabPane>
      <TabPane label="待审核" value="99"></TabPane>
      <TabPane label="已下线" value="2"></TabPane>
    </Tabs>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      newOne="新建职位"
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
    <Modal
      title="置顶职位"
      v-model="modal10"
      width="500"
      class-name="vertical-center-modal"
      @on-ok="buyTop"
    >
      <div class="zhiding">
        <RadioGroup v-model="topId" class="zhiding" @on-change="changeTop">
          <Radio
            v-for="(item,index) in topList"
            :key="index"
            class="zhidingItem"
            :label="item.id"
          >置顶{{item.time}}天</Radio>
          <Radio class="zhidingItem" label="cancel">取消置顶</Radio>
        </RadioGroup>
      </div>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import {
  JobList,
  JobAudit,
  TopList,
  BuyTopList,
  CancelTopList
} from "api/recuit/job";

export default {
  name: "",
  data() {
    return {
      formItem: {
        conpanyName: "",
        jobName: "",
        jobType: "",
        searchType: "timeCreate",
        searchDataBegin: "",
        searchDataFinish: "",
        isTopList: ""
      },
      jobTypeArr: ["全职", "兼职", "钟点工"],
      columns: [
        {
          title: "职位ID",
          key: "job_id",
          width: 100
        },
        {
          title: "职位类别",
          key: "position_title",
          width: 200
        },
        {
          title: "职位名称",
          key: "job_title",
          width: 200,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              params.row.job_title || params.row.position_title
            );
          }
        },
        {
          title: "企业名称",
          key: "title",
          width: 200
        },
        {
          title: "工作性质",
          key: "type",
          width: 100,
          render: (h, params) => {
            return h( 
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              this.jobTypeArr[params.row.job_type - 1]
            );
          }
        },
        {
          title: "收到的简历",
          key: "postApplyJob",
          width: 100
        },
        {
          title: "已沟通的简历",
          key: "contactApplyJob",
          width: 110
        },
        {
          title: "悬赏金额（元）",
          key: "resume_price",
          width: 130
        },
        {
          title: "时间",
          key: "time_create",
          width: 150
        },
        {
          title: "置顶到期时间",
          key: "date_toplist",
          width: 150,
          render: (h, params) => {
            return h("span", params.row.date_toplist || "未置顶");
          }
        },
        {
          title: "操作",
          key: "action",
          width: 350,
          align: "center",
          render: (h, params) => {
            if (this.auditStatus == 1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postApply",
                          params: { jobId: params.row.job_id }
                        });
                      }
                    }
                  },
                  "申请记录"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postDetail",
                          params: { jobId: params.row.job_id }
                        });
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.actionJob(params.row.job_id, "2");
                      }
                    }
                  },
                  "下线"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.getTopInfo(params.row.job_id);
                      }
                    }
                  },
                  "置顶"
                )
              ]);
            } else if (this.auditStatus == 2) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postApply",
                          params: { jobId: params.row.job_id }
                        });
                      }
                    }
                  },
                  "申请记录"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postDetail",
                          params: { jobId: params.row.job_id }
                        });
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.actionJob(params.row.job_id, "4");
                      }
                    }
                  },
                  "发布"
                )
              ]);
            } else if (this.auditStatus == 99) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postDetail",
                          params: { jobId: params.row.job_id }
                        });
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.actionJob(params.row.job_id, "1");
                      }
                    }
                  },
                  "通过"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.actionJob(params.row.job_id, "3");
                      }
                    }
                  },
                  "拒绝"
                )
              ]);
            }
          }
        }
      ],

      data: [],
      detailCol: [
        {
          title: "操作时间",
          key: "time"
        },
        {
          title: "操作名称",
          key: "name"
        },
        {
          title: "本次充值",
          key: "nowCash"
        },
        {
          title: "累计充值",
          key: "allCash"
        }
      ],
      detailData: [],
      modal10: false,
      topList: [],
      page: 0,
      pageNum: 9, //显示条数
      jobSum: 0, //职位总数
      auditStatus: 1, //查询状态
      pageTotal: 0, //页面总数
      cancelTop: ""
    };
  },
  components: {
    TableList
  },

  mounted() {
    this.getData();
  },

  methods: {
    //切换页面
    changePage(data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //新建职位
    newOne() {
      console.log(1231231);
      this.$router.push({ name: "postDetail" });
    },
    //查询状态
    changeStatus(e) {
      this.page = 0;
      switch (e) {
        case 0:
          this.auditStatus = 1;
          break;
        case 1:
          this.auditStatus = 99;
          break;
        case 2:
          this.auditStatus = 2;
          break;
      }
      this.getData();
    },
    //条件查询
    searchData() {
      this.page = 0;
      this.getData();
    },
    //操作职位
    actionJob(jobId, auditStatus) {
      JobAudit({ jobId, auditStatus })
        .then(res => {
          this.$Message.success("操作成功");
          this.getData();
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    //获取置顶信息数据
    getTopInfo(jobId) {
      TopList({ jobId })
        .then(result => {
          // let hasBiao = false
          // for(let i = 0;i < result.topList.length;i++){
          //   if(result.topList[i].check && !hasBiao){
          //     result.topList[i].hasChoose = true
          //     this.topId = result.topList[i].id
          //   }else{
          //     result.topList[i].hasChoose = false
          //   }
          // }
          let temp = [];
          for (let i = 0; i < result.topList.length; i++) {
            if (result.topList[i].check) {
              temp.push(result.topList[i]);
            }
          }
          if (temp.length) {
            this.topList = temp;
            this.modal10 = true;
            this.jobId = jobId;
          } else {
            this.$Message.error(
              "平台未配置置顶功能，请前往招聘->应用配置中配置"
            );
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 处理选中置顶
    changeTop(value) {
      let topList = this.topList;
      if (value == "cancel") {
        this.cancelTop = value;
      } else {
        this.cancelTop = "";
        for (let i = 0; i < topList.length; i++) {
          if (topList[i].id == value) {
            topList[i].hasChoose = true;
            this.topId = topList[i].id;
          } else {
            topList[i].hasChoose = false;
          }
        }
      }
    },
    //购买置顶
    buyTop() {
      let dataItem = {
        jobId: this.jobId,
        toplistId: this.topId
      };
      if (this.cancelTop == "cancel") {
        CancelTopList(dataItem)
          .then(result => {
            this.$Message.success(result.info);
            setTimeout(() => {
              this.getData();
            }, 1000);
          })
          .catch(err => {
            this.$Message.error(err);
          });
      } else {
        BuyTopList(dataItem)
          .then(result => {
            this.$Message.success(result.info);
            setTimeout(() => {
              this.getData();
            }, 1000);
          })
          .catch(err => {
            this.$Message.error(err);
          });
      }
    },
    //获取数据
    getData() {
      let page = this.page;
      let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }
      //获取状态条件
      dataList.auditStatus = this.auditStatus;
      //时间段转换成时间戳
      dataList.searchDataBegin = dataList.searchDataBegin.valueOf() / 1000;
      dataList.searchDataFinish = dataList.searchDataFinish.valueOf() / 1000;
      JobList(dataList).then(res => {
        let { jobList, jobSum, page } = res;
        this.data = jobList;
        this.jobSum = jobSum;
        this.pageTotal = page.pageTotal;
        this.page = Number(page.page)
      });
    }
  }
};
</script>

<style scoped lang="less">
.zhiding {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  // align-items: center;

  .zhidingItem {
    padding: 10px 0;
    font-size: 16px;
  }
}
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
.card {
  margin-bottom: -16px;
}
</style>
